<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="保养记录编号">
                <el-input v-model="queryParams.code" placeholder="请输入保养记录编号" clearable style="width: 200px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="保养计划名称">
                <el-input v-model="queryParams.planName" placeholder="请输入保养计划名称" clearable style="width: 200px"
                    @keyup.enter="handleQuery" />
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="queryParams.status" placeholder="请选择保养计划类型" clearable>
                    <el-option v-for="dict in mes_caredetail_state" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" border :data="recordsList" style="margin-top: 20px;">
            <el-table-column label="序号" width="60" type="index" align="center"></el-table-column>
            <el-table-column label="状态" align="center" prop="status">
                <template #default="scope">
                    <dict-tag :options="mes_caredetail_state" :value="scope.row.status" />
                </template>
            </el-table-column>
            <el-table-column label="保养记录编号" align="center" width="220" prop="code">
                <template v-slot="{ row }">
                    <el-button type="primary" @click="handleView(row)" text>{{ row.code
                    }}</el-button>
                </template>
            </el-table-column>
            <el-table-column label="计划名称" width="120" align="center" prop="planName" />
           
            <el-table-column label="计划类型" align="center" prop="planType">
                <template #default="scope">
                    <dict-tag :options="mes_care_plantype" :value="scope.row.planType" />
                </template>
            </el-table-column>
            <el-table-column label="下发部门编号" align="center" prop="detailDeptCode" />
            <el-table-column label="下发部门名称" width="120" align="center" prop="detailDeptName" />
            <el-table-column label="执行周期规则" align="center" prop="cycleRule" />
            <el-table-column label="设备名称" width="180" align="center" prop="machineName" />
            <el-table-column label="设备编号" align="center" prop="machineNo" />
            <el-table-column label="计划保养时间" align="center" width="160" prop="startTime">
                <template #default="scope">
                    <div>{{ formatDate(scope.row.startTime) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="保养完成时间" align="center" width="160" prop="endTime" />
            <el-table-column label="操作人" align="center" prop="operator" />
            <el-table-column label="创建人" align="center" prop="createBy" />
            <el-table-column label="操作" fixed="right" align="center" width="120" class-name="small-padding fixed-width">
                <template #default=scope>
                    <el-tooltip content="编辑" placement="top" v-if="!scope.row.planName && scope.row.status === 0">
                        <el-button link type="primary" icon="Edit" @click="handleEdit(scope.row)"></el-button>
                    </el-tooltip>
                    <el-button link type="primary" v-if="scope.row.status != 2 && scope.row.status != 3" icon="Checked"
                        @click="handleComplete(scope.row)">完成</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination style="margin-top: 0;padding-top: 0;" v-show="total > 0" :total="total"
            v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
    </div>
</template>
 
<script setup name="records">
import { listCaredetail, delCaredetail, updateCaredetail } from '@/api/maintenance/records.js'
const { proxy } = getCurrentInstance();
const { mes_care_plantype, mes_caredetail_state } = proxy.useDict('mes_care_plantype', 'mes_caredetail_state');
import { downLoadBlob } from '@/utils/ruoyi'
import { formatDate } from '@/utils/index'
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter()
const recordsList = ref([]);
const loading = ref(false);
const total = ref(0);

const showSearch = ref(true);
import { getToken } from "@/utils/auth";
/*** 用户导入参数 */
const upload = reactive({
    // 是否显示弹出层（用户导入）
    open: false,
    // 弹出层标题（用户导入）
    title: "",
    // 是否禁用上传
    isUploading: false,
    // 是否更新已经存在的用户数据
    updateSupport: 0,
    // 设置上传的请求头部
    headers: { Authorization: "Bearer " + getToken() },
    // 上传的地址
    url: import.meta.env.VITE_APP_BASE_API + "/mes/custom/importData"
});
const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: null,
        planName: null,
        status: null,
        mark: 0
    },
    rules: {
        code: [
            { required: true, message: "客户编码不能为空", trigger: "blur" }
        ],
        name: [
            { required: true, message: "客户名称不能为空", trigger: "blur" }
        ],
    }
});
const { queryParams, form, rules } = toRefs(data);
// 查看
const handleView = (row) => {
    router.push({
        path: '/maintenance/records/details',
        query: {
            id: row.id,
            readonly: true,
            code: row.code,
            status: row.status
        }
    })
}
// 新增
const handleAdd = () => {
    router.push('/maintenance/records/details')
}
const handleEdit = (row) => {
    router.push({
        path: '/maintenance/records/details',
        query: {
            id: row.id,
            code: row.code,
            status: row.status
        }
    })
}
const handleComplete = (row) => {
    ElMessageBox.confirm('是否确认完成保养?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        // 用户点击了确定按钮
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const complateTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

        const formDate = { ...row }
        formDate.status = 2
        formDate.endTime = complateTime
        updateCaredetail(formDate).then(response => {
            if (response.code === 200) {
                ElMessage({
                    message: '保养完成',
                    type: 'success',
                });
                getList();
            }
        });
    }).catch(() => {
        //取消
    });

}


function getList() {
    loading.value = true;
    listCaredetail(queryParams.value).then(response => {
        recordsList.value = response.rows;
        total.value = response.total;
        loading.value = false;
    });
}
/** 搜索按钮操作 */
function handleQuery() {
    queryParams.value.pageNum = 1;
    getList();
}
/** 重置按钮操作 */
function resetQuery() {
    queryParams.value.code = null
    queryParams.value.planName = null
    queryParams.value.status = null
    handleQuery();
}
// 导出
const handleExport = () => {
    // customerExport(queryParams.value).then(res => {
    //     downLoadBlob(res, '客户列表')
    // })
}






getList();
</script>
 